<!-- 对 text 文本组件的编辑 -->
<template>
  <div class="rich-text-edit" v-if="dialogShow">
    <SetDesignDialog :title="name" :dialogVisible="dialogShow" :close="close" :saveclose="saveclose"
      ref="settingComponentDialog">
      <el-row style="width:840px;">
        <el-col :span="24">
          <el-divider content-position="left">内容编辑</el-divider>
          <Ue :id="'rich-text-editor-' + new Date().getTime()" :defaultValue="data.html" :editorReady="editorReady"
            toolbarsType="componentRichtext" ref="contentref">
          </Ue>
        </el-col>
      </el-row>
    </SetDesignDialog>
  </div>
</template>

<script>
import TextAlign from '@/components/common/design/dialog/component/formitem/TextAlign.vue'
import SetDesignDialog from '@/components/common/dialog/SetDesignDialog.vue'
import * as WindowType from '@/config/windowtype.js'
// import * as PubsubType from '@/config/pubsubtype.js'
import VueFunctions from '@/core/VueFunctions.js'
import BackendjsFunctions from '@/core/BackendjsFunctions.js'
import { mapState } from 'vuex'
import Ue from '@/components/common/ueditor/Ue.vue'
// import PubSub from 'pubsub-js'
import _ from 'lodash'
export default {
  computed: {
    ...mapState([
      'design'
    ])
  },
  created () {
    VueFunctions.method(WindowType.EDIT_COMPONENT_WITH_COMPONENTRICHTEXT, (bjComponent) => {
      this.close()
      this.dialogShow = true
      this.bjComponent = bjComponent
      this.data = bjComponent.render.data

      // coding ...
      if (this.data && this.data.config && this.data.config.textAlign === '') {
        this.data.config.textAlign = 'left'
      }

      this.$nextTick(() => {
        this.$refs['contentref'].setUEContent(this.data.html)
        this.$refs['settingComponentDialog'].open()
      })
    })
  },
  mounted () {
    // PubSub.subscribe(PubsubType.PUBSUB_DIGLOG_COMPONENT_CLOSE, (event, data) => {
    //   this.close()
    // })
    // PubSub.subscribe(PubsubType.PUBSUB_DIGLOG_COMPONENT_AND_CONTAINER_CLOSE, (event, data) => {
    //   this.close()
    // })
  },
  data () {
    return {
      dialogShow: false,
      formLabelWidth: '120px',
      name: '富文本',
      bjComponent: null,
      data: null
    }
  },
  methods: {
    editorReady () {
      this.$refs['settingComponentDialog'].open()
    },
    close () {
      this.dialogShow = false
      this.name = '富文本'
      this.bjComponent = null
      this.data = null
    },
    saveclose () {
      this.data.html = this.$refs['contentref'].getUEContent()
      this.bjComponent.render.data = _.cloneDeep(this.data)
      BackendjsFunctions.saveComponent(this.bjComponent)
      this.close()
    }
  },
  components: {
    SetDesignDialog,
    TextAlign,
    Ue
  }
}

</script>
